<template>
    <header>
        <div class="dingwei">
          <p >
            <span class="iconfont icon-shouhuodizhi"></span>
            <span>立人科技</span>
            <span class="jiantou"></span>
          </p>
          <div class="kuangkuang">
              <span class="iconfont icon-fangdajing"></span>
              <input type="text" placeholder= " 鲜嫩草莓 惹人爱~">
          </div>
        </div>
    </header>
</template>

<script>
export default {

}
</script>

<style scoped>
header{
    width: 100%;
    height: 0.6rem;
    line-height: .6rem;
  }
  .dingwei{
      position: relative;
      border-bottom:1px solid rgb(216,216,216) ;
  }
  .dingwei p{
      position: relative;
      font-weight: 600;
  }
  .dingwei p .jiantou{
    width: .1rem;
    height: .1rem;
    display: block;
    transform: rotate(-45deg);
    border-left:2px solid #aaa;
    border-bottom:2px solid #aaa;
    position: absolute;
    top: .21rem;
    left: 1.07rem;
  }
  .dingwei p span{
      margin-left: .1rem;
  }
  .kuangkuang{
      position: absolute;
      right: .1rem;
      top: 0;
  }
  .kuangkuang input{
      height: .3rem;
      width: 1.8rem;
      background: rgb(246,246,246);
      outline: none;
      border: none;
      border-radius:0 .15rem .15rem 0;
  }
  .kuangkuang span{
      text-align: center;
      display: inline-block;
      width: .3rem;
      background: yellow;
      height: .3rem;
      line-height: .27rem;
      border-radius:.15rem 0 0 .15rem ;
      background: rgb(246,246,246);
  }
</style>